<route lang="json5">
{
  name: 'DashboardRouteTag',
  path: '/dashboard-route-tag',
  meta: {
    title: 'Route标签示例',
    icon: 'chart',
    layout: 'pc-default',
    orderNo: 3,
    noCache: false,
    // 权限设置
    roles: ['admin'],
    permissions: ['dashboard:advanced:view'],
    // 链接到外部网站的配置
    frameSrc: '',
    // 面包屑设置
    hideBreadcrumb: false,
    // 当前激活的菜单
    currentActiveMenu: '/dashboard',
    // 过渡动画设置
    transition: {
      name: 'fade-slide',
      mode: 'out-in',
    },
    // 自定义属性
    analytics: {
      pageId: 'dashboard-001',
      category: 'admin-pages',
    },
  },
  // 当有子路由时是否一直显示
  alwaysShow: true,
  // 重定向设置
  redirect: '',
  // 子路由配置
  children: [
    {
      path: 'analysis',
      name: 'DashboardAnalysis',
      meta: {
        title: '分析页',
        icon: 'analysis',
        noCache: false,
      },
    },
    {
      path: 'workplace',
      name: 'DashboardWorkplace',
      meta: {
        title: '工作台',
        icon: 'workplace',
        noCache: true,
      },
    },
  ],
}
</route>

<template>
  <div class="advanced-dashboard">
    <el-row :gutter="20">
      <el-col :span="24">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>高级Dashboard示例</span>
              <el-button type="primary" size="small">查看详情</el-button>
            </div>
          </template>

          <el-tabs v-model="activeTab">
            <el-tab-pane label="概览" name="overview">
              <div class="dashboard-content">
                <div class="stats-grid">
                  <div class="stat-item" v-for="(item, index) in overviewStats" :key="index">
                    <div class="stat-value">{{ item.value }}</div>
                    <div class="stat-title">{{ item.title }}</div>
                    <div class="stat-trend" :class="item.trend">
                      <el-icon v-if="item.trend === 'up'"><ArrowUp /></el-icon>
                      <el-icon v-else><ArrowDown /></el-icon>
                      {{ item.percentage }}%
                    </div>
                  </div>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="详细数据" name="details">
              <p>详细数据内容区域</p>
            </el-tab-pane>
            <el-tab-pane label="系统状态" name="system">
              <p>系统状态内容区域</p>
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" style="margin-top: 20px">
      <el-col :span="12">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>访问来源</span>
            </div>
          </template>
          <div style="height: 300px">
            <!-- 这里可以放置图表组件 -->
            <p>访问来源图表区域</p>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>销售趋势</span>
            </div>
          </template>
          <div style="height: 300px">
            <!-- 这里可以放置图表组件 -->
            <p>销售趋势图表区域</p>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import { ArrowUp, ArrowDown } from '@element-plus/icons-vue';

  const activeTab = ref('overview');

  const overviewStats = ref([
    { title: '总销售额', value: '¥126,560', trend: 'up', percentage: 12.5 },
    { title: '访问量', value: '8,846', trend: 'up', percentage: 25.3 },
    { title: '订单量', value: '1,286', trend: 'down', percentage: 8.1 },
    { title: '转化率', value: '38%', trend: 'up', percentage: 6.7 },
  ]);
</script>

<style scoped lang="scss">
  .advanced-dashboard {
    padding: 20px;

    .card-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .dashboard-content {
      .stats-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;

        .stat-item {
          padding: 20px;
          border-radius: 4px;
          background-color: #f9f9f9;

          .stat-value {
            color: #303133;
            font-size: 24px;
            font-weight: bold;
          }

          .stat-title {
            margin: 8px 0;
            color: #909399;
            font-size: 14px;
          }

          .stat-trend {
            display: flex;
            align-items: center;
            font-size: 12px;

            &.up {
              color: #67c23a;
            }

            &.down {
              color: #f56c6c;
            }
          }
        }
      }
    }
  }
</style>
